<template>
	<view style="">
		<view style="width: 100%;">
			<image :src="goodslist[0]" style="width: 100%;"></image>
		</view>
		<view style="background-color: white;  
		position: relative;top: -20px; 
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;">
			<view style="display: flex;margin:0px 15px ;">
				<view style="position: relative;top: -20px;border-radius: 5rpx;">
					<image :src="shopDetail.logo" style="width: 134rpx;height: 134rpx;border-radius: 5rpx;"></image>
				</view>
				<view style="margin-left: 10px;">
					<view style="color: #000000;line-height: 68.8rpx;font-size: 32rpx;">{{shopDetail.shop_name}}</view>
					<view style="color: #000000;font-size: 22rpx;">行业:{{shopDetail.label}}</view>
				</view>
			</view>
			<!-- 店铺商品展示 -->
			<view
				style="display: flex;justify-content: space-between;border-bottom:1px solid #DCDCDC;margin:0px 15px; padding-bottom: 15px;position: relative;">
				<view class="shopTips">{{goodslistSize}}张</view>
				<block v-for="url in goodslist">
					<image style="width: 30%;height: 130rpx;" :src="url"></image>
				</block>
			</view>
			<!-- 营业时间 -->
			<view class="item" style="display: flex;align-items: center;">
				<u-icon :label="shopDetail.business" space="10" labelColor="#000000" size="20"
					name="/static/images/sptb.png" style="flex: 1;"></u-icon>
				<!-- <u-icon name="arrow-right" color="#000000" size="15" @click="toGround"></u-icon> -->

			</view>
			<!-- 地址 -->
			<view class="item" style="display: flex;align-items: center;">
				<u-icon :label="shopDetail.shop_address" space="10" labelColor="#000000" size="20"
					name="/static/images/addrss.png" style="flex:5;" width="24rpx" height="35rpx"></u-icon>
				<view style="flex: 1!important;justify-content: flex-end!important;">
					<u-icon space="10" labelColor="#000000" width="45rpx" height="35rpx"
						name="/static/images/carmap.png" @click="getLocation">
					</u-icon>
				</view>
				<view style="flex: 1!important;justify-content: flex-end!important;">
					<u-icon space="10" labelColor="#000000" width="16px" height="15.5px" name="/static/images/tel.png"
						class="test" @click="callPhone">
					</u-icon>
				</view>

			</view>
			<!-- 热销商品 -->
			<view class="item" style="padding-top: 0;padding-bottom: 0;" v-if="goodInfo!=null">
				<view style="color: #000000;padding: 10px 0;font-size: 20px;font-weight: 500;">
					{{goodInfo.name}}
				</view>
				<view>
					<image style="width:100%;border-radius: 20rpx;" :src="goodInfo.image"></image>
				</view>
				<view style="display: flex; align-items: center;height: 70rpx;font-size: 22rpx;">
					<view v-if="goodInfo.activitydetails_content!=null" class="icon_text">送</view>
					<view
						style="display: flex;margin-right: 50rpx; align-items: center;width: 363rpx;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; ">
					
						<u-parse :content="goodInfo.activitydetails_content"></u-parse>
					</view>
					<view style="margin-right: 37rpx;margin-top: 2rpx;">
						<u-icon :label="goodInfo.view" labelSize="11" width="15.5px" height="9.5px"
							name="/static/images/view.png"></u-icon>
					</view>
					<view style="font-size: 22rpx;">半年售:{{goodInfo.buy_num?goodInfo.buy_num:'0'}}</view>
				</view>

			</view>
			<view class="item" style="padding-top: 0;border:transparent;margin-bottom: 20px;" v-if="goodInfo!=null">
				<view style="color: #000000;padding: 10px 0;font-size: 20px;font-weight: 500;">
					活动详情
				</view>
				<view>
					<u-parse :content="goodInfo.buy_content"></u-parse>
				</view>
			</view>
			<!-- 返回/抢购 -->
			<view class="lgAndBuybutton">
				<view class="backButton" @click="back()">
					<u-icon label="返回首页" labelColor="#FFFFFF" width="23px" height="23px"
						name="../../static/images/back (2).png"></u-icon>
				</view>
				<view class="buyButton" v-if="goodInfo!=null" @click="goPay()">立即抢购</view>
				<view class="buyButton" style="background: #b3b3b3!important;color:white	" v-if="goodInfo==null">立即抢购
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		shopdetails,
		orderpay
	} from "../../api/home.js";
	import {
		upFile
	} from "../../utils/url.js"
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		data() {
			return {
				shopDetail: {},
				goodslist: [

				],
				goodslistSize: 0,
				goodInfo: null,
			}
		},
		filters: {
			imgUrl(img) {
				if (img.indexOf('http') != -1) return img;
				if (img.indexOf('http') == -1) return 'http://wap.youpinpc.com' + img
			}
		},
		onLoad(e) {

			this.init(e.id)
			// this.getConfig();
			this.shop_id = e.id;
			console.log(e);
		},
		methods: {
			callPhone() {
				if (this.shopDetail.phone != null) {
					uni.makePhoneCall({
						phoneNumber: this.shopDetail.phone //仅为示例
					});
				} else {
					uni.$u.toast("暂无联系号码")
				}

			},
			// 到这去
			getLocation() {
				if (this.shopDetail.lat != null) {
					uni.openLocation({
						name:this.shopDetail.shop_name,
						address:this.shopDetail.shop_address,
						latitude:Number(this.shopDetail.lat),
						longitude:Number(this.shopDetail.lng),
						success: function(e) {
							console.log('success',e);
						}
					});
				} else {
					uni.$u.toast("暂无详细地址")
				}

			},
			async filterStr(str){
					var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%+_]");
					var specialStr = "";
					for(var i=0;i<str.length;i++)
					{
					     specialStr += str.substr(i, 1).replace(pattern, ''); 
					}
					console.log(specialStr)
					return specialStr;
			},
			async init(id) {
				var data = {
					shop_id: id
				}
				var res = await shopdetails(data);
				if (res.data.code == 1) {
					let shopDetail = res.data.data;
					this.shopDetail = shopDetail;
					this.goodInfo = shopDetail.goods_arr;
					uni.setNavigationBarTitle({
						title: shopDetail.name
					});
					let goodslistStr = shopDetail.shop_images;
					this.goodslist = goodslistStr.split(",")
					this.goodslistSize = this.goodslist.length
					console.log(this.goodslist);
				}
			},
			async goPay() {
				uni.navigateTo({
					url: "/pages/home/placeOrder?goodInfo=" + JSON.stringify(this.goodInfo)
				})
			},
			getConfig() {
				var data = {
					url: encodeURIComponent(location.href.split('#')[0])
				}
				wechatConfig(data).then(res => {
					//alert("获取配置成功"+JSON.stringify(res));
					this.initJsdk(res.data.data)
				})
			},
			initJsdk(config) {
				////alert("initJsdk");  
				this.$wx.config({
					debug: false, // 开启调试模式
					appId: config.appId, // 必填，公众号的唯一标识
					timestamp: config.timestamp, // 必填，生成签名的时间戳
					nonceStr: config.nonceStr, // 必填，生成签名的随机串
					signature: config.signature, // 必填，签名，见附录1
					jsApiList: config.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				})
				this.$wx.ready(function() {
					this.$wx.checkJsApi({
						jsApiList: ['openLocation'],
					})
					alert("初始化成功");
				})
				this.$wx.error(function(res) {});

			},

			back() {
				uni.navigateBack({
					delta: 2
				});
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.icon_text {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		color: white;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		background: #F5750A;
		font-size: 10px;
		border-radius: 4px;
		text-align: center;
	}

	.u-icon__label {
		margin-top: 5rpx !important;
	}

	.u-icon__label span {
		font-size: 10px !important;
	}

	.item {
		border-bottom: 1px solid #DCDCDC;
		margin: 0px 15px;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	.shopTips {
		position: absolute;
		top: 40px;
		z-index: 10;
		color: white;
		background: #000000;
		font-size: 10px;
		text-align: center;
		opacity: 0.59;
		padding: 0 3px;
	}

	.lgAndBuybutton {
		display: flex;
		justify-content: center;
		height: 44px;
		margin-top: 150rpx;
	}

	.backButton {
		background-color: #333333;
		color: white;
		width: 334rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44px 0px 0px 44px;
	}

	.buyButton {

		color: white;
		width: 334rpx;
		border-radius: 0px 44px 44px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #98E05F, #0DE3AC)
	}

	.u-icon--right {
		justify-content: inherit !important;
	}
</style>
